<script setup>
import { ref } from 'vue'
import { designApi } from '@/api/design'
import CommonButton from '@/components/CommonButton.vue'

const formData = ref({
  style: '',
  colors: [],
  materials: [],
  furniture: []
})

const loading = ref(false)

const styleList = [
  { label: '现代简约', value: 'modern' },
  { label: '北欧风格', value: 'nordic' },
  { label: '日式禅风', value: 'japanese' },
  { label: '美式轻奢', value: 'american' },
  { label: '中式古典', value: 'chinese' }
]

const colorList = [
  { label: '纯白', value: 'white' },
  { label: '米色', value: 'beige' },
  { label: '浅灰', value: 'light-gray' },
  { label: '深灰', value: 'dark-gray' },
  { label: '原木色', value: 'wood' }
]

const materialList = [
  { label: '实木', value: 'wood' },
  { label: '大理石', value: 'marble' },
  { label: '玻璃', value: 'glass' },
  { label: '金属', value: 'metal' },
  { label: '布艺', value: 'fabric' }
]

const furnitureList = [
  { label: '沙发', value: 'sofa' },
  { label: '茶几', value: 'coffee-table' },
  { label: '餐桌', value: 'dining-table' },
  { label: '床', value: 'bed' },
  { label: '衣柜', value: 'wardrobe' }
]

const toggleSelection = (list, value) => {
  const index = list.indexOf(value)
  if (index > -1) {
    list.splice(index, 1)
  } else {
    list.push(value)
  }
}

const handleSubmit = async () => {
  if (!formData.value.style) {
    uni.showToast({
      title: '请选择装修风格',
      icon: 'none'
    })
    return
  }
  
  if (formData.value.colors.length === 0) {
    uni.showToast({
      title: '请选择主色调',
      icon: 'none'
    })
    return
  }
  
  if (formData.value.materials.length === 0) {
    uni.showToast({
      title: '请选择装修材料',
      icon: 'none'
    })
    return
  }
  
  if (formData.value.furniture.length === 0) {
    uni.showToast({
      title: '请选择家具类型',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  try {
    const res = await designApi.customizeStyle(formData.value)
    uni.navigateTo({
      url: `/pages/design/ai-generate?id=${res.data.id}`
    })
  } catch (error) {
    uni.showToast({
      title: error.message || '提交失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">装修风格</text>
        <view class="radio-group">
          <view 
            v-for="item in styleList"
            :key="item.value"
            class="radio-item"
            :class="{ active: formData.style === item.value }"
            @click="formData.style = item.value"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">主色调（可多选）</text>
        <view class="checkbox-group">
          <view 
            v-for="item in colorList"
            :key="item.value"
            class="checkbox-item"
            :class="{ active: formData.colors.includes(item.value) }"
            @click="toggleSelection(formData.colors, item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">装修材料（可多选）</text>
        <view class="checkbox-group">
          <view 
            v-for="item in materialList"
            :key="item.value"
            class="checkbox-item"
            :class="{ active: formData.materials.includes(item.value) }"
            @click="toggleSelection(formData.materials, item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">家具类型（可多选）</text>
        <view class="checkbox-group">
          <view 
            v-for="item in furnitureList"
            :key="item.value"
            class="checkbox-item"
            :class="{ active: formData.furniture.includes(item.value) }"
            @click="toggleSelection(formData.furniture, item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <CommonButton 
        type="primary"
        size="large"
        :loading="loading"
        @click="handleSubmit"
      >
        开始生成
      </CommonButton>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}

.form {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.form-item {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  margin: -8rpx;
}

.radio-item,
.checkbox-item {
  margin: 8rpx;
  padding: 16rpx 32rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666666;
  
  &.active {
    background-color: #e8f7e4;
    color: #3cc51f;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.footer {
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: env(safe-area-inset-bottom);
  padding: 32rpx 0;
  background-color: #ffffff;
}
</style> 